* {
    /* 清除内外边距 */
    margin: 0;
    padding: 0;
    /* c3怪异盒子模型 */
    box-sizing: border-box;
}

/* 页面跳转缓慢 */
html,
body {
    scroll-behavior: smooth;
}

/* 背景颜色  */
body {
    background-color: #f3f5f7;
}

/* 伪元素 */

.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {
    *zoom: 1;
}

/* 版心 */
.w {
    width: 1200px;
    margin: auto;
}

/* 去除小黑点 */
li {
    list-style: none;
}

/* 去除下划线 */
a {
    font-family: "Microsoft YaHei";
    text-decoration: none;
}

/* 左浮动 */
.left_float {
    float: left;
}

/* 右浮动 */
.right_float {
    float: right;
}

/* 头部区域 start */
.header {
    height: 42px;
    /* 不给auto 会层叠 */
    margin: 30px auto;
}

/* logo */
.header .logo img {
    width: 195px;
    height: 42px;
}

/* nav 导航栏模块 */
.header .nav {
    margin-left: 60px;
}

.header .nav ul li {
    float: left;
    margin: 0px 15px;
}

.header .nav ul li a {
    /* 行内元素转换为块级元素 */
    display: block;
    height: 42px;
    padding: 0px 10px;
    line-height: 42px;
    font-size: 18px;
    color: #050505;
}

.header .nav ul li a:hover {
    color: #00a4ff;
    border-bottom: 2px solid #00a4ff;
}

/* seacrh 搜索框模块 */

.header .search {
    width: 412px;
    height: 42px;
    margin-left: 50px;
}

.header .search input {
    float: left;
    width: 362px;
    height: 40px;
    border: 1px solid #00a4ff;
    border-right: 0;
    font-size: 14px;
    color: black;
    padding: 1.5px 0px 0px 20px;
    /* 清除搜索框获取焦点时的样式 */
    outline: none;
}

input:hover {
    background-color: rgba(153, 231, 255, 0.3);
}

.header .search button {
    float: left;
    width: 50px;
    height: 42px;
    /* 按钮默认边框 */
    border: 0;
    background-color: #00a4ff;
    background: url(./images/fa-search.png) no-repeat top center;
}

/* user 用户模块 */

.header .user span {
    display: inline-block;
    height: 42px;
    line-height: 42px;
    margin-right: 40px;
    font-size: 14px;
    color: #666;
    margin-left: 5px;
}

.header .user img {
    vertical-align: middle;
}

/* 头部区域 end */

/* banner区域 start */

.banner {
    width: 100%;
    height: 420px;
    background-color: #1c036c;
}

.banner .banner_img {
    height: 420px;
    background: url(./images/banner.png) no-repeat top center;
}

/* 左侧导航 */
.banner .banner_img .subnav {
    width: 190px;
    height: 420px;
    /* 半透明 */
    background-color: rgba(0, 0, 0, 0.2);
}

.banner .banner_img .subnav ul {
    padding-top: 7.5px;
}

.banner .banner_img .subnav ul li {
    height: 45px;
    line-height: 45px;
    margin-left: 20px;
    padding: 0px 20px;
}

.banner .banner_img .subnav ul li a {
    font-size: 14px;
    color: white;
}

.banner .banner_img .subnav ul li a span {
    float: right;
}

.banner .banner_img .subnav ul li a:hover {
    color: #0681c4;
}

/* course 课程表 */

.banner .banner_img .course {
    width: 230px;
    height: 300px;
    background-color: #fff;
    margin-top: 50px;
}

.banner .banner_img .course h2 {
    width: 230px;
    height: 48px;
    font-size: 18px;
    letter-spacing: 3px;
    color: white;
    text-align: center;
    line-height: 48px;
    background-color: #9bceea;
}

.banner .banner_img .course div {
    padding: 0 20px;
}

.banner .banner_img .course div ul li {
    padding: 15px 0;
    border-bottom: 1px solid #efefef;
}

.banner .banner_img .course div ul li h4 {
    font-size: 14px;
    color: #4e4e4e;
}

.banner .banner_img .course div ul li p {
    font-size: 12px;
    color: #a5a5a5;
}

.banner .banner_img .course div a {
    display: block;
    height: 38px;
    border: 1px solid #00a4ff;
    font-size: 16px;
    text-align: center;
    line-height: 38px;
    font-weight: 700;
    color: #00a4ff;
    margin-top: 8px;
}

.banner .banner_img .course div a:hover {
    color: rgb(255, 0, 0);
}

/* banner区域 end */

/* good 精品推荐 start */

.goods {
    height: 60px;
    line-height: 60px;
    margin-top: 10px;
    background-color: #fff;
    /* 水平 垂直 模糊距离 颜色 */
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.15);
}

.goods ul {
    margin-left: 30px;
}

.goods ul li {
    float: left;
}

.goods h3 {
    float: left;
    font-size: 16px;
    color: #00a4ff;
    margin-left: 30px;
}

.goods ul li a {
    font-size: 16px;
    color: #050505;
    padding: 0px 30px;
    border-left: 1px solid #bfbfbf;
}

.goods ul li a:hover {
    color: #00a4ff;
}

.goods .hobby {
    font-size: 14px;
    color: #00a4ff;
    margin-right: 30px;
}

.goods .hobby:hover {
    color: rgb(255, 0, 0);
}

/* good 精品推荐 end */

/* box 内容区域 start */

.box {
    height: 600px;
    margin-top: 35px;
}

.box .box_title {
    height: 45px;
}

.box .box_title h3 {
    font-size: 20px;
    color: #494949;
}

.box .box_title a {
    margin-top: 10px;
    margin-right: 33.5px;
    font-size: 12px;
    color: #a5a5a5;
}

.box .box_title a:hover {
    color: #00a4ff;
}

.box .box_content ul li {
    float: left;
    width: 228px;
    height: 270px;
    background-color: rgb(255, 255, 255);
    margin-right: 15px;
    margin-bottom: 15px;
}

.box .box_content ul li:nth-child(5) {
    margin-right: 0px;
}

.box .box_content ul li:nth-child(10) {
    margin-right: 0px;
}

.box .box_content ul li img {
    width: 100%;
}

.box .box_content ul li h4 {
    margin-left: 24px;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-right: 20px;
    font-size: 14px;
    font-weight: 400;
    color: #050505;
}

.box .box_content ul li .info {
    margin-left: 24px;
    margin-right: 20px;
    font-size: 12px;
    color: #999999;
}

.box .box_content ul li:nth-child(1),
.box .box_content ul li:nth-child(2),
.box .box_content ul li:nth-child(6),
.box .box_content ul li:nth-child(7) {
    position: relative;
}

.box .box_content ul li .hot {
    position: absolute;
    top: 4px;
    left: 192px;
    width: 40px;
    height: 24px;
    background-image: url(./images/hot.png);
}

.box .box_content ul li .new {
    position: absolute;
    top: 4px;
    left: 192px;
    width: 40px;
    height: 24px;
    background-image: url(./images/new.png);
}

/* box 内容区域 end */

/* floor 楼层 start */

.floor {
    position: fixed;
    top: 312px;
    right: 50%;
    width: 150px;
    height: 400px;
    margin-right: 610px;
    background-color: #fcf8f8;
    box-shadow: 3px 3px 3px rgba(194, 194, 194, 0.2);
}

.floor ul {
    margin-top: 5px;
    margin-left: 15px;
}

.floor ul li {
    height: 35px;
    line-height: 35px;
}

.floor ul li a {
    font-size: 13px;
    color: #424242;
}

.floor ul li a:hover {
    color: #42b2ff;
}

/* floor 楼层 end */

/* web 编程入门 start */

.web {
    margin-top: 35px;
}

.web .web_top {
    height: 40px;
}

.web .web_top h3 {
    font-size: 20px;
    color: #494949;
}

.web .web_top ul {
    margin-left: 350px;

}

.web .web_top ul li {
    float: left;
    margin-right: 70px;
}

.web .web_top .text li a {
    font-size: 16px;
    color: #868686;
}

.web .web_top .text li:nth-child(1) a {
    color: #42b2ff;
}

.web .web_top .text li a:hover {
    color: #42b2ff;
}

.web .web_top a {
    margin-top: 5px;
    margin-right: 33.5px;
    font-size: 12px;
    color: #a5a5a5;
}

.web .web_top a:hover {
    color: #00a4ff;
}

.web_bottom {
    height: 392px;
    background-color: rgb(255, 255, 255);
}

/* php入门 */
.web_bottom .php_img {
    width: 228px;
    height: 100%;
    margin-right: 15px;
}

/* 快乐编程 */
.web_bottom .happy_web {
    width: 957px;
    height: 100px;
    margin-bottom: 23px;
}

.web_bottom ul li {
    float: left;
    width: 227px;
    height: 269px;
    background-color: rgb(255, 255, 255);
    margin-right: 16.33px;
}

.web_bottom ul li:last-child {
    margin-right: 0;
}

.web_bottom ul li img {
    width: 100%;
}

.web_bottom ul li h4 {
    font-size: 14px;
    font-weight: 400;
    color: #050505;
    margin: 15px 20px 20px 25px;
}

.web_bottom ul li:last-child h4 {
    margin-bottom: 16.8px;
}

.web_bottom ul li:nth-child(3) h4 {
    margin-bottom: 35px;
}

.web_bottom ul li .info {
    margin-left: 23px;
    font-size: 12px;
    color: #999999;
}

.web_bottom ul .center h4 {
    margin-bottom: 36px;
}

/* web 编程入门 end */

/* data 数据分析师 start */

.data {
    margin-top: 35px;
}

.data .data_top {
    height: 40px;
}

.data .data_top h3 {
    font-size: 20px;
    color: #494949;
}

.data .data_top ul {
    margin-left: 330px;
}

.data .data_top ul li {
    float: left;
    margin-right: 70px;
}

.data .data_top .text li a {
    font-size: 16px;
    color: #868686;
}

.data .data_top .text li:nth-child(1) a {
    color: #42b2ff;
}

.data .data_top .text li a:hover {
    color: #42b2ff;
}

.data .data_top a {
    margin-top: 5px;
    margin-right: 33.5px;
    font-size: 12px;
    color: #a5a5a5;
}

.data .data_top a:hover {
    color: #00a4ff;
}

.data .data_bottom {
    height: 392px;
    background-color: rgb(255, 255, 255);
}

/* php入门 */
.data .data_bottom .php_img {
    width: 228px;
    height: 100%;
    margin-right: 15px;
}

/* 快乐编程 */
.data .data_bottom .happy_web {
    width: 957px;
    height: 100px;
    margin-bottom: 23px;
}

.data .data_bottom ul li {
    float: left;
    width: 227px;
    height: 269px;
    background-color: rgb(255, 255, 255);
    margin-right: 16.33px;
}

.data .data_bottom ul li:last-child {
    margin-right: 0;
}

.data .data_bottom ul li img {
    width: 100%;
}

.data .data_bottom ul li h4 {
    font-size: 14px;
    font-weight: 400;
    color: #050505;
    margin: 15px 20px 20px 25px;
}

.data .data_bottom ul li:nth-child(3) h4 {
    margin-bottom: 16.8px;
}

.data .data_bottom ul li:nth-child(4) h4 {
    margin-bottom: 35px;
}

.data .data_bottom ul li .info {
    margin-left: 23px;
    font-size: 12px;
    color: #999999;
}

.data .data_bottom ul .center h4 {
    margin-bottom: 36px;
}

/* data 数据分析师 end */

/* study 机器学习工程师 start */
.study {
    margin-top: 35px;
}

.study .study_top {
    height: 40px;
}

.study .study_topp h3 {
    font-size: 20px;
    color: #494949;
}

.study .study_top ul {
    margin-left: 300px;
}

.study .study_top ul li {
    float: left;
    margin-right: 70px;
}

.study .study_top .text li a {
    font-size: 16px;
    color: #868686;
}

.study .study_top .text li:nth-child(1) a {
    color: #42b2ff;
}

.study .study_top .text li a:hover {
    color: #42b2ff;
}

.study .study_top a {
    margin-top: 5px;
    margin-right: 33.5px;
    font-size: 12px;
    color: #a5a5a5;
}

.study .study_top a:hover {
    color: #00a4ff;
}

.study .study_bottom ul li {
    float: left;
    width: 228px;
    height: 270px;
    background-color: rgb(255, 255, 255);
    margin-right: 15px;
}

.study .study_bottom ul li:last-child {
    margin-right: 0px;
}

.study .study_bottom ul li img {
    width: 100%;
}

.study .study_bottom ul li h4 {
    font-size: 14px;
    font-weight: 400;
    color: #050505;
    margin: 15px 20px 20px 25px;
}

.study .study_bottom ul li:nth-child(4) h4 {
    margin-bottom: 37px;
}

.study .study_bottom ul li .info {
    margin-left: 23px;
    font-size: 12px;
    color: #999999;
}

.study .study_bottom ul .center h4 {
    margin-bottom: 39px;
}

.study .study_bottom ul li:first-child h4 {
    margin-bottom: 23px;
}

.study .study_bottom ul li:nth-child(4) h4 {
    margin-bottom: 39px;
}

/* study 机器学习工程师 end */

/* fe 前端开发工程师 start */
.fe {
    margin-top: 35px;
}

.fe .fe_top {
    height: 40px;
}

.fe .fe_top h3 {
    font-size: 20px;
    color: #494949;
}

.fe .fe_top ul {
    margin-left: 300px;
}

.fe .fe_top ul li {
    float: left;
    margin-right: 70px;
}

.fe .fe_top .text li a {
    font-size: 16px;
    color: #868686;
}

.fe .fe_top .text li:nth-child(1) a {
    color: #42b2ff;
}

.fe .fe_top .text li a:hover {
    color: #42b2ff;
}

.fe .fe_top a {
    margin-top: 5px;
    margin-right: 33.5px;
    font-size: 12px;
    color: #a5a5a5;
}

.fe .fe_top a:hover {
    color: #00a4ff;
}

.fe .fe_bottom ul li {
    float: left;
    width: 228px;
    height: 270px;
    background-color: rgb(255, 255, 255);
    margin-right: 15px;
}

.fe .fe_bottom ul li:last-child {
    margin-right: 0px;
}

.fe .fe_bottom ul li img {
    width: 100%;
}

.fe .fe_bottom ul li h4 {
    font-size: 14px;
    font-weight: 400;
    color: #050505;
    margin: 15px 20px 20px 25px;
}

.fe .fe_bottom ul li:nth-child(4) h4 {
    margin-bottom: 37px;
}

.fe .fe_bottom ul li .info {
    margin-left: 23px;
    font-size: 12px;
    color: #999999;
}

.fe .fe_bottom ul .center h4 {
    margin-bottom: 39px;
}

.fe .fe_bottom ul li:first-child h4 {
    margin-bottom: 23px;
}

.fe .fe_bottom ul li:nth-child(4) h4 {
    margin-bottom: 39px;
}

/* fe 前端开发工程师 end */

/* recommend 前端开发工程师 start */
.recommend {
    margin-top: 35px;
}

.recommend .recommend_top {
    height: 40px;
}

.recommend .recommend_top h3 {
    font-size: 20px;
    color: #494949;
}

.recommend .recommend_center ul li {
    float: left;
}

.recommend .recommend_center ul li {
    width: 230px;
    height: 320px;
    background-color: red;
    margin-bottom: 31px;
}

.recommend .recommend_center ul li:nth-child(2) {
    width: 235px;
    height: 320px;
    background-color: red;
}


.recommend .recommend_center ul li img {
    width: 100%;
    height: 100%;
}

.recommend .recommend_center ul li:first-child {
    margin-right: 9px;
}

.recommend .recommend_center ul li:nth-child(2) {
    margin-right: 12px;
}

.recommend .recommend_center ul li:nth-child(3) {
    margin-right: 13px;
}

.recommend .recommend_center ul li:nth-child(4) {
    margin-right: 11px;
}

.recommend .recommend_bottom ul li {
    float: left;
    width: 230px;
    height: 320px;
}

.recommend .recommend_bottom ul li:first-child {
    width: 471px;
    height: 320px;
}

.recommend .recommend_bottom ul li img {
    width: 100%;
    height: 100%;
}

.recommend .recommend_bottom ul li:first-child {
    margin-right: 15px;
}

.recommend .recommend_bottom ul li:nth-child(2) {
    margin-right: 13px;
}

.recommend .recommend_bottom ul li:nth-child(3) {
    margin-right: 10px;

}

.recommend .recommend_bottom ul li {
    margin-bottom: 98px;
}

/* recommend 前端开发工程师 end */

/* footer 底部 start */
.footer {
    width: 100%;
    height: 417px;
    background-color: rgb(255, 255, 255);
}

.footer .footer_content .footer_content_left {
    margin-top: 33px;
    margin-right: 20px;
}

.footer .footer_content .footer_content_left img {
    width: 195px;
    height: 42px;
}

.footer .footer_content .footer_content_left span {
    display: block;
    font-size: 12px;
    font-family: "宋体";
    color: #666666;
    margin-top: 25px;
    margin-bottom: 17px;
}

.footer .footer_content .footer_content_left button {
    width: 120px;
    height: 36px;
    border: 1px solid #00a4ff;
    background-color: #fff;
}

.footer .footer_content .footer_content_left button a {
    font-size: 16px;
    color: #00a4ff;
}

.footer .footer_content .footer_content_left button a:hover {
    color: #ff0000;
}

.footer .footer_content .footer_content_right {
    margin-top: 35px;
}

.footer .footer_content .footer_content_right dl {
    margin-right: 32px;
}

.footer .footer_content .footer_content_right dl dt {
    font-size: 16px;
    color: #333;
}

.footer .footer_content .footer_content_right dl dd a {
    font-size: 12px;
    font-family: "宋体";
    color: #333;
}

.footer .footer_content .footer_content_right dl:nth-child(2) {
    margin-right: 122px;
}

.footer .footer_content .footer_content_right dl:nth-child(3) {
    margin-right: 146px;
}

.footer .footer_content .footer_content_right dl dd a:hover {
    color: #00a4ff;
}

/* footer 底部 end */